<template>
  <div>
    <Header :left="false" title="设备管理" />
    <Row style="margin-top: 80px;">
      <div class="container dwo">
        <div class="card">
          <div class="text">用户名：{{user.nickName}}</div>
          <div class="text">班 组：{{user.classes}}</div>
          <div class="text">部 门：{{user.depart}}</div>
          <div class="text">设备编码：{{equip.equipCode}}</div>
        </div>
      </div>
    </Row>
    <Row style="margin-top: 30px;">
      <div class="container dwo">
        <div class="card_under">
          <Row>
            <Col span="12">
              <div class="card_icon">
                <Icon name="todo-list-o" color="#FFFFFF" size="8rem" @click="doCheck" />
                <br />
                <span class="text_scan">设备点检</span>
              </div>
            </Col>
            <Col span="12">
              <div class="card_icon">
                <Icon name="apps-o" color="#FFFFFF" size="8rem" @click="showToast" />
                <br />
                <span class="text_scan">设备保养</span>
              </div>
            </Col>
          </Row>
          <Row>
            <Col span="12">
              <div class="card_icon">
                <Icon name="phone-circle-o" color="#FFFFFF" size="8rem" @click="showToast" />
                <br />
                <span class="text_scan">设备呼叫</span>
              </div>
            </Col>
            <Col span="12">
              <div class="card_icon">
                <Icon name="records" color="#FFFFFF" size="8rem" @click="showToast" />
                <br />
                <span class="text_scan">维修审核</span>
              </div>
            </Col>
          </Row>
        </div>
      </div>
    </Row>
  </div>
</template>
<script>
import { Icon, Button, Row, Col, Toast } from "vant";
import Header from "@/components/header.vue";
import { storage, memory } from '@/libs/utils';
export default {
  name: "equip_operation",
  components: { Button, Header, Icon, Row, Col, Toast },
  data () {
    return {
      equip: {
        equipCode: '',
      },
      taskItemList: [],
      user: {
        classes: '',
        nickName: '',
        depart: '生产'
      },
    };
  },
  created () {
    let user = memory.get('user');
    this.user = user;
    let params = api.pageParam;
    this.equip.equipCode = params.equipCode;
    this.taskItemList = params.taskItemList;
    //alert(JSON.stringify(this.taskItemList));
  },
  methods: {
    showToast () {
      Toast.success('已完成');
    },
    doCheck () {
      let that = this;
      that.$ac.openWin({
        name: 'equip_check',
        url: "./demos-equip_check.html",
        pageParam: {
          equipCode: that.equip.equipCode,
          equipName: that.equip.equipName,
          group: that.equip.group
        }
      });
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: 'Open Sans', sans-serif;
}

.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  /* position: absolute; */
  height: 200px;
  width: 95%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.card_under {
  /* position: absolute; */
  height: 360px;
  width: 95%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
  font-size: 19px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}

.text_scan {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto auto;
  line-height: 1.5em;
  text-align: justify;
}
</style>


